<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 数据表格</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="../statics/hplus/favicon.ico"> <link href="../statics/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../statics/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="../statics/hplus/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="../statics/hplus/css/animate.min.css" rel="stylesheet">
    <link href="../statics/hplus/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
    <link href="../statics/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <!--<h5>基本 <small>分类，查找</small></h5>-->
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <!--<a class="dropdown-toggle" data-toggle="dropdown" href="../statics/hplus/table_data_tables.html#">-->
                            <!--<i class="fa fa-wrench"></i>-->
                        <!--</a>-->
                        <!--<ul class="dropdown-menu dropdown-user">-->
                            <!--<li><a href="../statics/hplus/table_data_tables.html#">选项1</a>-->
                            <!--</li>-->
                            <!--<li><a href="../statics/hplus/table_data_tables.html#">选项2</a>-->
                            <!--</li>-->
                        <!--</ul>-->
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <!--<div class="col-sm-5 m-b-xs">-->
                            <!--<select class="input-sm form-control input-s-sm inline">-->
                                <!--<option value="0">请选择</option>-->
                                <!--<option value="1">选项1</option>-->
                                <!--<option value="2">选项2</option>-->
                                <!--<option value="3">选项3</option>-->
                            <!--</select>-->
                        <!--</div>-->
                        <!--<div class="col-sm-4 m-b-xs">-->
                            <!--<div data-toggle="buttons" class="btn-group">-->
                                <!--<label class="btn btn-sm btn-white">-->
                                    <!--<input type="radio" id="option1" name="options">天</label>-->
                                <!--<label class="btn btn-sm btn-white active">-->
                                    <!--<input type="radio" id="option2" name="options">周</label>-->
                                <!--<label class="btn btn-sm btn-white">-->
                                    <!--<input type="radio" id="option3" name="options">月</label>-->
                            <!--</div>-->
                        <!--</div>-->
                        <div class="col-sm-3">
                            <div class="input-group">
                                <input type="text" id="tableName" placeholder="请输入关键词" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" id="searchBtn" class="btn btn-sm btn-primary"> 搜索</button> </span>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal"> 生成代码</button>
                            <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content animated bounceInRight">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="form-group">
                                                <input type="email" placeholder="输入author" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <input type="email" placeholder="输入model-package" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <input type="email" placeholder="输入service-package" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <input type="email" placeholder="输入serviceImpl-package" class="form-control">
                                            </div>
                                            <div class="form-group">
                                                <input type="email" placeholder="输入mapper-package" class="form-control">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-primary">确认</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th class="text-center" style="width: 5%;"></th>
                            <th class="text-center" style="width: 5%;">编号</th>
                            <th class="text-center" style="width: 20%;">数据库</th>
                            <th class="text-center" style="width: 25%;">表</th>
                            <th class="text-center" style="width: 25%;">注释</th>
                            <th class="text-center" style="width: 20%;">创建时间</th>
                        </tr>
                        </thead>
                        <!--<tfoot>-->
                        <!--<tr>-->
                        <!--<th>渲染引擎</th>-->
                        <!--<th>浏览器</th>-->
                        <!--<th>平台</th>-->
                        <!--<th>引擎版本</th>-->
                        <!--<th>CSS等级</th>-->
                        <!--</tr>-->
                        <!--</tfoot>-->
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="../statics/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="../statics/hplus/js/bootstrap.min.js?v=3.3.5"></script>
<script src="../statics/hplus/js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="../statics/hplus/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="../statics/hplus/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="../statics/hplus/js/content.min.js?v=1.0.0"></script>
<script src="../statics/hplus/js/plugins/iCheck/icheck.min.js"></script>
<script>
    var dataTablesExample;

    //取参
    function getParam() {
        var param = {};

        var tableName = $("#tableName").val();
        if(tableName){
            param.tableName = tableName;
        }
        //
        // var bookTimeEnd = $("#bookTimeEnd").val();
        // if(bookTimeEnd){
        //     param.bookTimeEnd = bookTimeEnd;
        // }
        return param;
    }

    function timeToString(dateTime){
        if(dateTime==null){
            return "";
        }
        var date = new Date(dateTime);
        var Y = date.getFullYear();
        var M = (date.getMonth()+1)<10?("0"+(date.getMonth()+1)) : (date.getMonth()+1);
        var D = date.getDate()<10?("0"+date.getDate()) : date.getDate();
        var H = date.getHours()<10?("0"+date.getHours()) : date.getHours();
        var m = date.getMinutes()<10?("0"+date.getMinutes()) : date.getMinutes();
        var s = date.getSeconds()<10?("0"+date.getSeconds()) : date.getSeconds();
        return Y + '-' + M + '-' + D + " " + H + ":" + m + ":" + s;
    }

    var doSearch = function(){
        dataTablesExample = $(".dataTables-example").dataTable({
            serverSide : true,                                  //服务器
            lengthChange : false,                                //可以改变每页条数
            // lengthMenu : [10, 50, 100],                         //分页选项
            pagingType : "full_numbers",						//翻页按钮类型
            searching : false,                                  //关闭本地搜索
            ordering : false,                                   //关闭本地排序
            autoWidth : false,                                  //关闭自适应宽度
            destroy : true,                                     //方便第二次加载
            // language : languageConfig,
            ajax : {
                type : "post",
                url : '/codeGen/getTableList',
                data : function(param){                         //入参
                    $.extend(true, param, getParam())
                },
                dataSrc : function (result) {                   //返参
                    return result.data;
                }
            },
            columns : [
                {data: null},
                {data: null},
                {data: null},
                {data: null},
                {data: null},
                {data: null}
            ],
            columnDefs : [
                {targets : 0, width : '5%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        var str= '';
                        str += '<div class="checkbox i-checks"><label><input type="checkbox"> <i></i></label></div>';
                        return str;
                    }
                },
                {targets : 2, width : '20%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return row.dbName;
                    }
                },
                {targets : 3, width : '25%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return row.tableName;
                    }
                },
                {targets : 4, width : '25%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return row.tableDesc;
                    }
                },
                {targets : 5, width : '20%', className : 'text-center',                 //
                    render : function(data, type, row, meta) {
                        return timeToString(row.createTime);
                    }
                }
                // ,
                // {targets : 5, width : '20%', className : 'text-center',                 //操作
                //     render : function (data, type, row, meta){
                //         var str= '';
                //         str += '<button class="btn btn-xs btn-success" onclick="">导出</button>';
                //         str += '<button class="btn btn-xs btn-success" onclick="" style="margin-left: 10px">下载日志</button>';
                //         return str;
                //     }
                // }
            ],
            fnDrawCallback : function(){
                this.api().column(1).nodes().each(function(cell, i) {
                    cell.innerHTML = '<div class="text-center">' + (i + 1) + '</div>';
                });
                $(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
            }
        });
    };
    $(document).ready(function(){
        
        $("#searchBtn").click(function () {
            doSearch();
        });

        doSearch();
    })
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

</body>

</html>